import React from 'react';
import {connect} from 'dva';
import {Button, Col, Form, Input, Popconfirm, Row, Table} from 'antd';
import Constants from '../../../utils/Constants';
import RightConstants from '../../../utils/RightConstants';
import RightBox from '../../../components/commons/RightBox';
import PortDetail from '../../../components/logistics/PortDetail';


const FormItem = Form.Item;

const logisticsPort = Form.create()(class LogisticsPort extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'port/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }

    handleOpen = (id, disabled) => {
        this.props.dispatch({
            type: 'port/getById',
            payload: { id }
        });

        this.portDetail.handleOpen(disabled);

    }


    handleDelete = id => {
        this.props.dispatch({
            type: 'port/deleteById',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }

    handleSearch = flag => {
        let newPage = this.props.port.page;
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'port/getListForPage',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [
        { title: '港口编码', dataIndex: 'portCode', key: 'portCode'},
        { title: '港口中文名称', dataIndex: 'portName', key: 'portName'},
        { title: '港口英文名称', dataIndex: 'portNameEn', key: 'portNameEn'},
        { title: '类型', render(record) {
            if(record.portType === '1') {
                return '海运港口';
            }else if(record.portType === '2') {
                return '空运港口';
            }else {
                return '未知';
            }
        }},
        { title: '创建时间', dataIndex: 'creattime', key: 'creattime'},
        { title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},
        {
            title: '操作',
            render: (record) => {
                let editLink = <RightBox resource={RightConstants.LOGISTICS_PORT.LOGISTICS_PORT_EDIT} split={true}><a href="#" onClick={this.handleOpen.bind(this, record.id, false)}>编辑</a></RightBox>
                let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否"
                                             placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                    <a href="#">删除</a>
                </Popconfirm>
                deleteLink = <RightBox resource={RightConstants.LOGISTICS_PORT.LOGISTICS_PORT_DELETE} split={true}>{deleteLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true)}>查看</a>
                return <span>{editLink}{deleteLink}{viewLink}</span>
            }
        }
    ];

    render(){
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.port.page.size,
            current: this.props.port.page.page,
            total: this.props.port.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                portType:undefined;
                let newPage = this.props.port.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'port/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.port.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'port/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'港口中文名称'}>
                            {getFieldDecorator('portName')
                            (
                                <Input maxLength="50" placeholder="港口中文名称"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'港口编码'}>
                            {getFieldDecorator('portCode')
                            (
                                <Input maxLength="50" placeholder="港口编码"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={9} style={{ marginLeft: 24 }}>
                        <Button  type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)} size={'default'}>查询</Button>
                        <RightBox resource={RightConstants.LOGISTICS_PORT.LOGISTICS_PORT_ADD} >
                            <Button type="primary" icon="plus" style={{marginRight: 5 }} onClick={this.handleOpen.bind(this, null, false)} size={'default'}>添加港口</Button>
                        </RightBox>
                    </Col>
                </Row>

                <Table loading={this.props.loading} rowKey='id' dataSource={this.props.port.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
                <PortDetail wrappedComponentRef={(inst) => this.portDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.port, port: state.port
    };
}

export default connect(mapStateToProps)(logisticsPort);
